import React, { useEffect, useState } from 'react'

/**
 * 函数式组件 VS ，类组件特点对比，优势和劣势
 * 概念：函数式组件（无状态组件、纯组件、PureComponent）
 * React组件（React类），React元素（JSX元素）
 * 没有this
*/

/**
 * useState, 一定给定初始值
 * useState在定义声明式变量时，要使用set系列方法去更新，不建议直接去修改
 * DOM运算的是最小化，使用的是diff算法
 * 
 * useEffect
 * 如何理解副作用？你可以这么理解，只要不是生成JSX的业务代码，都可以认为是副作用。
 * 副作用包括定时器、调接口、长连接、DOM操作、第三方库的初始化等。
 * 作用：模拟类组件中生命周期的特性
*/

export default props => {
  // do something
  const [count, setCount] = useState(0)
  const [msg, setMsg] = useState('')
  const [show, setShow] = useState(true)
  const [num] = useState(1)

  const changeCount = type => {
    if (type === 'add') {
      setCount(count + 1)
    } else {
      setCount(count - 1)
    }
  }

  // let timer = null
  // useEffect 相当于一个生命周期
  useEffect(() => {
    console.log( num )
    // // 在这里使用副作用
    // timer = setInterval(() => {
    //   setNum(num + 10)
    // }, 1000)
    // return () => {
    //   clearInterval(timer)
    // }
  }, [num])

  useEffect(() => {
    document.title = 'hehe'
    console.log( '----' )
    return undefined
  }, [])

  useEffect(() => {
    let str = 'ct=24&qqmusic_ver=1298&new_json=1&remoteplace=txt.yqq.top&searchid=25697592547780876&t=0&aggr=1&cr=1&catZhida=1&lossless=0&flag_qc=0&p=1&n=10&w=%E5%91%A8%E6%9D%B0%E4%BC%A6&g_tk_new_20200303=264588153&g_tk=264588153&loginUin=1691732926&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0'

    const params = {}
    str.split('&').map(item => {
      const arr = item.split('=')
      params[arr[0]] = arr[1]
    })
    params.w = '周杰伦'

    React.$api.fetchQQList(params).then(res => {
      console.log( res )
    })

    return undefined
  }, [])

  console.log( props )
  return (
    <div>
      <h1>测试hooks</h1>
      <hr/>
      <h2>{ count }</h2>
      <button onClick={ () => changeCount('add') }>自增</button>
      <button onClick={ () => changeCount('sub') }>自减</button>
      <hr/>

      <input 
        type="text"
        value={ msg }
        onChange={ e => setMsg(e.target.value) }
      />
      <hr/>

      { show && <span>今朝有酒今朝</span> }
      <button onClick={ () => setShow(show ? false : true) }>显示/隐藏</button>
      <hr/>

      <span>{ num }</span>
    </div>
  )
}